<template>
<!-- 这是商品列表页面 -->
  <div id="goods">
    <div class="title-box">
        <h2>{{$t("Goods.commodity")}}<i class="border"></i></h2>
    </div>
    <!-- 商品列表展示-->
    <div class="row clearfix" id="goodsList">
      <ul class="g-row-ul">
        <li v-for="(item,index) in goodsList" :key="item.goods_id" @click="goods(goodsList[index].goods_id)">
          <img :src="url+item.goods_image" alt="" >
          <h4>{{item.title}}</h4>
          <span>{{item.min_price}} 元</span>
        </li>
      </ul>
    </div>
    <!-- 分页 -->
    <div class="pagination" >
      <el-pagination
        v-if="pageBool"
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totals">
      </el-pagination>
    </div>
  </div>
</template>

<script src="../../../public/js/jquery-1.11.0.min.js"></script>
<script>
export default {
  data () {
    return {
      pageBool: true,   // 分页是否显示
      currentPage: 1, //默认第一页
      pageSize: 12,  //每页显示多少条数据
      totals: 0,   //一共多少条数据
      goodsList: [],  //商品列表数据
      url: "https://mp.uekea.cn/attachment/",   //图片网址拼接
    }
  },
  methods: {
    // 分页监听当前所在页数
      handleCurrentChange(val) {
        sessionStorage.setItem("val",val)
        var _this=this;
        _this.$get(`goods/list/${val}`).then(res=>{
          if(res.code == 200) {
            _this.goodsList=res.data.goodsList;
          } else if(res.code == 404) {
            _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
          }
        })
        
      },
      // 跳到商品详情页面
      goods(i){
        this.$router.push({"path":"./goodsDetail",query: {id: i}})
      }
  },
  created () {
      var _this=this;
      // 判断是否有存储当前页数的，有就请求当前页数的，没有就请求默认第一页的数据
      if(sessionStorage.getItem("val") != null) {
        let val = Number(sessionStorage.getItem("val"));
        _this.$get(`goods/list/${val}`).then(res => {
            if(res.code == 200) {
              _this.goodsList=res.data.goodsList;
              if(Number(res.data.page[0].total) > _this.pageSize) {
                _this.pageBool = true;
              } else {
                _this.pageBool = false;
              }
              _this.totals = Number(res.data.page[0].total);
              _this.currentPage = val;
            } else if(res.code == 404) {
              _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
            }
        })
      } else {
          _this.$get("goods/list").then(res => {
            if(res.code == 200) {
              _this.goodsList=res.data.goodsList;
              // 当总页数大于每页显示数量，就显示分页
              if(Number(res.data.page[0].total) > _this.pageSize) {
                _this.pageBool = true;
              } else {
                _this.pageBool = false;
              }
              _this.totals = Number(res.data.page[0].total);
            } else if(res.code == 404) {
              _this.$MessageAlert(true,_this.$t('share.Message.error'),'error');
            }
          })
      }
  },
};
</script>

<style lang="less" scoped>
@import "../../../public/css/goods_detail/goods_style.css";
#goods {
  min-width: 1190px;
}
#goodsList{
  margin: 0px;
  margin: auto;
  max-width: 1250px;
  min-width: 1190px;
  
  padding: 15px;
  background-color: white;
}
.border{
  display: inline-block;
  width: 30px;
  border-bottom:3px solid #E2B972;
  margin-left: 17px;
}
.g-row-ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
  li{
    // border-radius: 10px;
    width: 26%;
    margin-top: 50px;
    transition-duration: 1s;
    img{
      // border-radius: 10px;

      height: 317px;
      width: 100%;
    }
    h4{
        font-size: 17px;
        height: 40px;
        line-height: 40px;
        padding-top: 10px;
        padding-left: 15px;
        padding-right: 15px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        color: black;
        margin: 10px 0px;
      }
    span{
      color: #E2B972;
      display: inline-block;
      margin-bottom: 20px;
      font-size: 16px;
    }
  }
}
.g-row-ul::after {
    content: '';
    display: block;
    width: 26%;
}
.g-row-ul li:hover{
  transform:translateY(-10px);
  transition-duration: 1.5s;
  box-shadow: 0px 8px 12px 3px #4E5454;
}
.title-box{
  max-width: 1250px;
  min-width: 1190px;
  margin: auto;
  margin-top: 190px;
  padding-left: 15px;
  text-align: left;
  h2{
    text-transform:none;
    font-family: none;
    font-weight: bold;
    font-size: 2.5em;
    color: black;
  }
}
.pagination{
  width: 100%;
  margin-top: 35px;
  margin-bottom: 100px;
  text-align: center;
}
/deep/ .el-pagination span:not([class*=suffix]){
  font-size: 15px;
}
/deep/ .el-pagination button{
  height: 30px;
}
/deep/ .el-pagination.is-background .btn-prev{
  min-width: 32px;
}
/deep/ .el-pager li{
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}
/deep/ .el-pagination.is-background .el-pager li{
  min-width: 32px;
}
/deep/ .el-pagination .btn-prev .el-icon{
  font-size: 18px;
}
/deep/ .el-pagination .btn-next .el-icon{
  font-size: 18px;
}
</style>